@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f7f9fc;
  }

  .gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  .ai-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  .user-avatar {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  }
}

@layer components {
  .chat-bubble {
    @apply max-w-[80%] p-3 rounded-lg break-words;
  }
  
  .chat-bubble-user {
    @apply bg-blue-500 text-white ml-auto;
  }
  
  .chat-bubble-ai {
    @apply bg-white shadow-sm border border-gray-200;
  }

  .loading-dots {
    @apply inline-flex space-x-1;
  }
  
  .loading-dot {
    @apply w-2 h-2 bg-gray-400 rounded-full animate-pulse;
    animation-delay: 0ms;
  }
  
  .loading-dot:nth-child(2) {
    animation-delay: 150ms;
  }
  
  .loading-dot:nth-child(3) {
    animation-delay: 300ms;
  }
} 